<template>
  <div>
    <div class="title">
        <span>审核驳回列表</span>
      <div>
        <el-button type="primary"><i class="el-icon-download"></i>导出</el-button>
        <el-button icon="el-icon-refresh" @click="refresh"></el-button>
      </div>
    </div>
    <div class="container">
      <div class="screeningBox">
        <div class="leftBox">
          <div class="leftitem">
            <el-form ref="conditions" :model="conditions" label-width="80px">
              <el-input class="merchants" v-model="conditions.merchantsno" placeholder="商户简称/商户名称/商户号"></el-input>
            </el-form>
          </div>
        </div>
        <div class="rightBox">
          <div class="rightitem">
            <el-button icon="el-icon-search" type="primary" @click="soso">搜索</el-button>
            <el-button icon="el-icon-refresh" type="primary" @click="reset">重置</el-button>
          </div>
        </div>
      </div>
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="merchantarr"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column type="index" align="center" label="序号"></el-table-column>
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="createTime" align="center" label="提交时间"></el-table-column>
          <el-table-column prop="merchantNo" align="center" label="商户号"></el-table-column>
          <el-table-column prop="merchantShortName" align="center" label="商户简称"></el-table-column>
          <el-table-column prop="merchantName" align="center" label="商户名称"></el-table-column>
          <el-table-column prop="agent2Name" align="center" label="服务商"></el-table-column>
          <!-- <el-table-column align="center" label="进件类型">
            <template slot-scope="scope">
              <div type="text" size="small">{{scope.row.activityStatus == 1?'动销':'零动销'}}</div>
            </template>
          </el-table-column> -->
          <el-table-column align="center" label="审核状态">
            <template slot-scope="scope">
              <div v-if='scope.row.status == 1'>审核中</div>
              <div v-else-if='scope.row.status == 9'>审核驳回</div>
              <div v-else-if='scope.row.status == 0' class='green'>正常</div>
              <!-- <div else >{{scope.row.statusName}}</div> -->
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" size="small">修改</el-button>
              <el-button type="text" size="small">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
      <br>
      <br>
    </div>
  </div>
</template>

<script>
import { merchantlist, getservice,getBD } from "@/api/api";
export default {
  name: "baseform",
  data: function() {
    return {
      cur_page: 1,
      cur_size: 10,
      BDarr:[],
      multipleSelection: [],
      merchantarr: [],
      pageCount: "",
      total:"",
      conditions: {
        servicelevel: "",
        servicename: "",
        BDname: "",
        merchantsno: "",
        province:"",
        city:"",
        date:"",
        serviceid:"",
        wx1s:""
      },
      storesinfo: {
        stardate: "",
        enddate: "",
        storesno: "",
        merchantsno: "",
        state: ""
      }
    };
  },
  created() {
    this.userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.merchantlist(this.userinfo.rolesId);
  },
  mounted() {},
  methods: {
    //修改thead 背景色
     tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F0F0F0;font-weight: 500;'
      }
    },
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.shop();
      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    // 分页数量
    sizechange(val) {
      this.cur_size = val;
      this.shop();

      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    joinmerchantsinfo(val) {
      this.$router.push({ path: "/auditdetails"  });
      sessionStorage.setItem('auditinfo',JSON.stringify(val))
    },
     // 审核驳回列表
    merchantlist(level) {
      let sosolist = {};
      if (level == 1) {
        sosolist = {
          page: this.cur_page,
          size: this.cur_size,
          keywords: this.conditions.merchantsno,
          status: '9'
        };
      } else if (level == 2) {
        sosolist = {
          page: this.cur_page,
          size: this.cur_size,
          keywords: this.conditions.merchantsno,
          status: '9'
        };
      }else{
         sosolist = {
          page: this.cur_page,
          size: this.cur_size,
          keywords: this.conditions.merchantsno,
          status: '9'
        };
      }
      merchantlist(sosolist).then(res => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.merchantarr = res.data;
          this.combined = res.pageInfo.recordCount;
          this.pageCount = res.pageInfo.pageCount;
          this.loading = false;
          this.total = res.pageInfo.recordCount
        }
      });
    },
    // 搜索
    soso() {
      // this.merchantlist();
    },
    // 重置
    reset() {
      this.storesinfo.merchantsno = "";
      this.storesinfo.storesno = "";
      this.storesinfo.state = "";
    },
    // 刷新
    refresh() {
      // location.reload()
      this.$router.replace({
        path: "/refresh",
        query: {
          t: Date.now()
        }
      });
    },
  }
};
</script>
<style scoped lang="less">
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.statistical {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #374459;
  color: #fff;
  padding: 12px;
  box-sizing: border-box;
}
.statistical > .statisticalitem {
  width: 50%;
  text-align: center;
  line-height: 200%;
}
.tableBox {
  margin-top: 20px;
}

.red {
  color: #f9607d;
}

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
.green{
  color:green;
}
</style>